<template>
  <div>
    <el-dialog
        title="本地博客上传"
        :visible.sync="localUploadVisible"
    >
      <div class="tipBox">
        <div class="tip">导入须知</div>
        <div class="tipItem">1）暂时只支持markdown格式的文件</div>
        <div class="tipItem">2）如果你的Markdown文档里面的图片是本地，会出现图片无法替换的问题</div>
        <div class="tipItem">3）若需要本地图片,可上传后在下面编辑器中将本地图片拖拽到相应位置，系统会自动替换图片</div>
        <div class="tipItem">4）目前只支持上传单个文件 </div>
      </div>

      <el-upload
          ref="uploadFile"
          name="fileData"
          :headers="importHeaders"
          :action="uploadAdminHost"
          :limit="1"
          :auto-upload="false">
          <el-button style="margin-top: 20px" slot="trigger" size="small" type="primary">选取Markdown文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交到服务器</el-button>
      </el-upload>

    </el-dialog>
  </div>
</template>

<script>
import { Loading } from 'element-ui';
import { getToken } from '@/utils/auth'
export default {
  name: "blog-upload",
  data(){
    return{
      localUploadVisible: false,
      // uploadAdminHost: 'http://localhost:10000/uum-blog/api/v1/blog/uploadMarkdownFile', //上传地址
      uploadAdminHost: 'http://119.91.202.218:10000/uum-blog/api/v1/blog/uploadMarkdownFile', //上传地址
      importHeaders: {  //上传携带的请求头
        'Authorization': getToken()
      },
      uploadLoading: null, //文件上传loading

    }
  },
  methods:{
    init(){
      this.localUploadVisible = true
    },
    // 文件上传
    submitUpload() {
      let {uploadFiles, action} = this.$refs.uploadFile
      if (uploadFiles.length != 1) {
        this.$message.error('目前只支持上传单个文件')
        return
      }
      this.openLoading();
      this.uploadFiles({
        uploadFiles,
        action,
        success: (res) => {
          let result = JSON.parse(res)
          this.closeLoading();
          if (!result.status) {
            this.$message.error(result.msg)
          }else {
            this.localUploadVisible = false
            this.$emit("getTransformContent", result.data)
            this.$message.success("导入成功")
            this.$refs.uploadFile.clearFiles()
          }
        },
        error: (error) => {
          this.closeLoading()
          console.log('失败了', error)
        }
      })
    },
    /**
     * 自定义上传文件
     * @param fileList 文件列表
     * @param data 上传时附带的额外参数
     * @param url 上传的URL地址
     * @param success 成功回调
     * @param error 失败回调
     */
    uploadFiles({uploadFiles, headers, data, action, success, error}) {
      let form = new FormData()
      // 文件对象
      uploadFiles.map(file => {
        return form.append("fileData", file.raw)}
      )
      let xhr = new XMLHttpRequest()
      // 异步请求
      xhr.open("post", action, true)
      // 设置请求头
      xhr.setRequestHeader("Authorization", getToken());
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4){
          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            success && success(xhr.responseText)
          } else {
            error && error(xhr.status)
          }
        }
      }
      xhr.send(form)
    },
    openLoading() {
      this.uploadLoading = Loading.service({
        lock: true,
        text: '正在努力上传中……'
      })
    },
    closeLoading() {
      this.uploadLoading.close()
    },
  }
}
</script>

<style scoped>

</style>
